<template>
  <div>
    <myDivider name="报事管理"></myDivider>
    <el-tabs v-model="scene" @tab-click="handleClick">
      <el-tab-pane label="未处理" name="未处理"></el-tab-pane>
      <el-tab-pane label="已处理" name="已处理"></el-tab-pane>
    </el-tabs>
    <!-- 顶部搜索 -->
    <div class="top">
      <el-select v-model="keytype" placeholder="报事类别筛选" @change="SouSuo">
        <el-option label="所有" value=""></el-option>
        <el-option label="报修" value="1"></el-option>
        <el-option label="咨询" value="2"></el-option>
        <el-option label="建议" value="3"></el-option>
        <el-option label="表扬" value="4"></el-option>
      </el-select>
      <el-input @keyup.enter.native="SouSuo" class="Keyinput" maxlength="15" clearable v-model="keywords"
        placeholder="房间号/客户名/客户电话"></el-input>
      <el-select v-if="scene == '已处理'" clearable v-model="keyState" placeholder="处理结果" @change="SouSuo">
        <el-option label="已回复" value="0"></el-option>
        <el-option label="生成工单" value="1"></el-option>
      </el-select>
      <el-button class="searchForBtn" @click="SouSuo" type="primary">查询</el-button>
      <el-button class="searchForBtn" @click="reset">重置</el-button>
    </div>
    <div style="display: flex;justify-content: flex-end;" v-if="scene=='未处理'">
      <el-button type="success" @click="goDo('add')">新增</el-button>
    </div>
    <!-- 表格列表 -->
    <div class="tableBox">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column align="center" prop="customerName" label="报事客户" min-width="180">
        </el-table-column>
        <el-table-column align="center" prop="phone" label="客户电话" width="130">
        </el-table-column>
        <el-table-column align="center" prop="eventDay" label="报事时间" min-width="200">
          <template slot-scope="scope">
            <span>{{ scope.row.eventDay }}</span>
       
          </template>
        </el-table-column>
        <el-table-column align="center" prop="category" label="报事类型" width="120">
          <template slot-scope="scope">
            <span>{{ categoryData[scope.row.category] }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="residentialName" label="所属小区" min-width="200">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.residentialInfo" placement="top-start">
              <span> {{
                scope.row.residentialName ? scope.row.residentialName.length > 8 ? '...' +
                  scope.row.residentialName.slice(scope.row.residentialName.length - 8)
                  :
                  scope.row.residentialName : '-'

              }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="roomName" label="报事房间" width="200">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.roomName" placement="top-start">
              <span> {{
                scope.row.roomName ? scope.row.roomName.length > 8 ? '...' +
                  scope.row.roomName.slice(scope.row.roomName.length - 8)
                  :
                  scope.row.roomName : '-'

              }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="description" label="报事内容" width="150">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.description" placement="top-start">
              <span> {{
                scope.row.description.length > 8 ? '...' + scope.row.description.slice(scope.row.description.length - 8)
                  :
                  scope.row.description
              }}</span>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column align="center" prop="dealResult" label="处理结果" width="150" v-if="scene == '已处理'">
        </el-table-column>
        <el-table-column align="center" prop="userName" label="经办人" width="150" v-if="scene == '已处理'">
        </el-table-column>
        <el-table-column align="center" prop="acceptTime" label="办理时间" min-width="180" v-if="scene == '已处理'">
        </el-table-column>
     

        <el-table-column align="center" label="操作" width="100" fixed="right">

          <template slot-scope="scope">
            <div class="textBtn">
              <el-row>
                <el-col class="el" :span="24">
                  <span style="color: #5fadff;cursor: pointer;font-weight: 600;"
                    @click="detailClick(scope.row)">详情</span>
                </el-col>
              </el-row>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 -->
    <myPagination :total="total" :pageNum="pageNum" @PageChange="PageChange" @pageSizeChange="pageSizeChange">
    </myPagination>


  </div>
</template>

<script>
import axios from '../../api/axios'
export default {

  data() {
    return {
      scene: "未处理",
      categoryData: ['', '报修', '咨询', '建议', '表扬'],
      keyword: '',
      tableData: [],
      keywords: '',
      keytype: '',
      keyState: '',
      stateList: ['报事中', '处理中', '已完成'],


      //事件id
      eventsId: '',
      customerId: null,
      HuiFuImgShow: false,
      total: 1,
      pageNum: 1,
      pageSize: 10,
      HuifuId: '',
    }
  },
  async activated() {
    this.reset()

  },
  async created() {
  },
  methods: {
    handleClick() {
      console.log(this.scene)
      this.reset()
    },
    detailClick(row) {
      this.$router.push(`/events/eventsDetail?id=${row.id}`)
    },
    pageSizeChange(e) {
      this.pageSize = e
      this.getEventList()
    },
    PageChange(e) {
      this.pageNum = e
      this.getEventList()
    },
    SouSuo() {
      // 如果点搜索的时候，当前页数在2的话，就会传2，数据少的时候获取第二页数据则会没有，所以需要手动改为1
      this.pageNum = 1
      this.getEventList()
    },
    reset() {
      this.keytype = ''
      this.keyState = ''
      this.keywords = ''
      this.SouSuo()
    },
    // 获取事件列表
    async getEventList() {
      let params = {
        "category": this.keytype,
        "keywords": this.keywords,
        "dealResult":this.keyState,
        "stateParam": this.scene == '未处理' ? '0' : '1',
        "pageSize": this.pageSize,
        "pageNum": this.pageNum,
      }
      let res = await this.$api.events.geteventList(params)
      if(res.code!=200){
        this.$message.error(res.message)
        return
      }
      if (res.data.list.length < 1 && this.pageNum != 1) { //判断，当搜索关键字有内容时，我直接点击分页，会造成关键词列表中没有某某页的数据，那么我就用第一页重新请求一次
        this.pageNum = 1
        this.getEventList()
        return
      }
      console.log(res.data.list, this.pageNum, '我的数据');
      this.total = res.data.total
      this.tableData = []
      res.data.list.forEach(el => {
        this.tableData.push(el)
      });

    },





    //去新增或修改
    goDo(val) {
      this.$router.push('/events/eventsAdd?type=' + val)
    }
  }
}
</script>

<style lang="less" scoped>
.top {
  width: 100%;
  padding: 20px 0;
  box-sizing: border-box;
  position: relative;

  .Keyinput {
    width: 200px;
  }

  .searchForBtn {}


}

.tableBox {
  margin-top: 20px;

  /deep/ .el-table {
    .has-gutter {
      .is-leaf {}
    }
  }

  .SeeDetail {
    cursor: pointer;
    font-weight: 600;
    margin-left: 10px;
  }

  .ellSpan {
    white-space: nowrap;
    /* 不换行 */
    overflow: hidden;
    /* 超出部分隐藏 */
    text-overflow: ellipsis;
    /* 溢出部分显示省略号 */
  }
}
</style>